<template>
  <div>
    <!-- 使用公共的头部，传入参数title -->
    <common-head title="我的购物车" />
    <!-- v-if判断购物车中是否有商品，如果length为0则表示没有商品显示no这个div -->
    <!-- 商品的数量为零时，数组长度为零 -->
    <div class="no" v-if="!items.length">
      <img src="https://i03piccdn.sogoucdn.com/acc3db07df68c32e" alt="" />
      <h1>亲！！！您的购物车还未添加商品</h1>
      <router-link to="/home"
        ><button>大佬，请赶快买点吧！！！</button></router-link
      >
    </div>
    <div class="wrap">
      <!-- {{items.length}} -->
      <!-- items所有商品的盒子 -->
      <div class="items">
        <!-- 遍历出来的每个商品 -->
        <van-swipe-cell v-for="(item, index) in items" :key="item.id">
          <div class="item" @click="enterDetail(item.id)">
            <!-- vant复选框 -->
            <van-checkbox @click="itemCheckChange" v-model="item.checked" />
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :title="item.name"
              :thumb="item.pic"
            >
              <template #footer>
                <!-- 步进器改变商品的数量 -->
                <van-stepper @change="itemNumChange" v-model="item.num" />
              </template>
            </van-card>
          </div>
          <!-- 左滑删除商品 -->
          <template #right>
            <!-- 通过下标删除 -->
            <van-button
              square
              @click="delItem(index)"
              text="删除"
              color="pink"
              class="delete"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- 总价,提交订单 -->
    <van-submit-bar
      :price="total * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <!-- 全选按钮 -->
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
// 引入vuex助手函数，mapState，mapMutations
import { mapState, mapMutations } from 'vuex'
// 直接引入Dialog弹出对话提示
import { Dialog } from 'vant'
export default {
  // 初始化完成时
  created () {
    // 调用计算总价的函数
    this.calcTotal()
  },
  methods: {
    enterDetail (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    delItem (index) {
      // 删除商品提示信息
      Dialog.confirm({
        title: '删除商品',
        message: '您真的要狠心抛弃我嘛?'
      }).then(() => {
        // on confirm
        this.items.splice(index, 1)
        // 改变vuex中的依赖数据
        this.set_items(this.items)
        // 从新计算商品的价格
        this.calcTotal()
        // console.log(this.items.length)
      })
    },
    itemCheckChange () {
      // console.log(this.items)
      /*
      双向绑定 this.items中的某个商品选中状态已经改变
      改变后视图刷新 this.items重新计算 但是 依赖没有变化
      视图没有变,只需要将改变后的值 赋值 依赖 让依赖变化
      */
      this.set_items(this.items)
      this.calcTotal()
      // every  选中每个商品时判断是不是所有商品都被选中了
      const allChecked = this.items.every((item) => item.checked)
      // 单选被选中为true否则为flase，如果单选全部被选中allChecked为true
      console.log(allChecked)
      this.set_allChecked(allChecked)
    },
    // 点击提交订单时调用
    onSubmit () {
      /*
      去除未选中商品
      将选中商品
      和总价格 一起发送给订单接口
      */
      // eslint-disable-next-line no-unused-vars
      const checkItems = this.items.filter((item) => item.checked)
      // eslint-disable-next-line no-unused-vars
      const total = this.total
      /*
      要将购买商品和总价格发送给提交订单接口
      默认返回 当前用户中的默认联系人
      */
      // 跳转到订单页 获取提交购买商品
      this.$router.push('/order')
    },
    // 点击改变商品购买数量
    itemNumChange () {
      // 将改变后的 计算属性 items 赋值给他在vuex中依赖的items
      this.set_items(this.items)
      // 重新计算总价格
      this.calcTotal()
      event.stopPropagation()
      // 原生阻止冒泡事件
    },
    calcTotal () {
      /*
      所有的已经选中的商品的 单价*数量累加
      */
      let total = 0
      // 去除未选中商品，filter过滤器
      const checkItems = this.items.filter((item) => item.checked)
      // 遍历已经选中的商品，计算总价
      checkItems.forEach((item) => {
        total += item.minPrice * item.num
      })
      // 保留两位小数
      total = parseFloat(total.toFixed(2))
      // 将计算好的总价格 给 vuex cart中 total
      this.set_total(total)
    },
    // 助手函数改变vuex中state中的值，...展开运算符，第一个参数为名cart的state
    ...mapMutations('cart', [
      'set_total',
      'set_items',
      'set_allChecked',
      'set_all_item_check'
    ])
  },
  computed: {
    ...mapState({
      items: (state) => JSON.parse(JSON.stringify(state.cart.items)),
      total: (state) => state.cart.total
    }),
    allChecked: {
      // 获取到全选
      get () {
        // 全选状态
        // console.log(this.$store.state.cart.allChecked)
        return this.$store.state.cart.allChecked
      },
      set (newVal) {
        /*
        想要直接修改计算属性 需要加 set 在set中通过定义newVal去修改他的依赖
        */
        // console.log(newVal)
        // 全选按钮得到选中状态选中为true
        this.set_allChecked(newVal)
        // 权限改变  修改每个商品选中状态
        this.set_all_item_check(newVal)
        this.calcTotal()
      }
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  margin-top: 95px;
  margin-bottom: 50px;

  .delete {
    height: 100%;
  }
  .item {
    border: 1px pink solid;
    border-radius: 50px;
    display: flex;
    background: pink;
    .van-checkbox {
      margin: 0 6px;
    }
    .van-card {
      flex: 1;
    }
  }
}
.van-submit-bar {
  bottom: 40px;
}
.no {
  margin-top: 130px;
  img {
    width: 100%;
    height: 200px;
  }
  h1 {
    color: red;
    text-align: center;
    font-family: "隶书";
  }
  button {
    margin: 65px;
    color: yellow;
    font-family: "华文行楷";
    background: red;
    border-radius: 30px;
  }
}
// 单选按钮的背景
/deep/ .van-checkbox__icon--checked .van-icon {
  background: pink;
}
// 单选按钮的边框
/deep/ .van-checkbox__icon .van-icon {
  border: 1px red solid;
}
</style>
